import styled from 'styled-components';

export const Loginwrap = styled.div`
position: relative;
    overflow:hidden;
    height:752px;
    &>.logintitle{
        position: absolute;
        font-size: 30px;
        color: white;
        font-weight: bold;
        top: 150px;
        left: 50%;
        transform: translateX(-50%);
    }
    &>.carousel{
        width:100%;
        height:100%;
        position:absolute;
        img{
            display: block;
            width:100%;
            height:100%;
        }
    }
    &>.form1{
        position:relative;
        margin:250px auto;
        width: 500px;
        background-color: black;
        border: 1px solid gray;
        border-radius:20px;
        opacity: 0.8;
        &>h1{
            text-align:center;
            color: white;
            height: 30px;
            line-height: 30px;
            position: relative;
            &::after{
                content:"";
                position: absolute;
                left: 25%;
                bottom:-10px;
                width: 50%;
                height: 5px;
                background-color:#194ab2;
            }
        }
        label{
            color: white !important;
        }
        form{
            margin-right: 20px;
            margin-top: 30px;
        }
    }
    &>.toregister{
        position: absolute;
        top:423px;
        left:750px;
        cursor: pointer;
        color:red;
        &:hover{
            color:blue;
        }
    }
`